<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardListRef" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0"
        style="cursor: pointer"
        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
        @click="clickCountToFn(item)"
      >
        <template #extra>
          <!--          <Tag :color="item.color">{{ item.action }}</Tag>-->
        </template>

        <div class="py-4 px-4 flex justify-between items-center">
          <CountTo :startVal="1" :endVal="item.value" class="text-2xl" :color="item.color" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="p-2 px-4 flex justify-between">
          <span>{{ item.title }}</span>
          <!--          <CountTo prefix="$" :startVal="1" :endVal="item.total" />-->
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { CountTo } from '@/components/CountTo';
  import Icon from '@/components/Icon/Icon.vue';
  import { Tag, Card } from 'ant-design-vue';
  import { growCardList } from '../data';
  import { homeStatisticsApi } from '@/api/sys/wmHome';
  import { useGo } from '@/hooks/web/usePage';

  import { ref, computed, watch, onMounted } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import util from '@/utils/util';

  const growCardListRef = ref(growCardList);
  const go = useGo();

  const props = defineProps({
    loading: {
      type: Boolean,
    },
    // dateObj: {type:Object,default:{}},
    dateStr: {
      type: String,
      default: '',
    },
    dateType: {
      type: String,
      default: '',
    },
    dateRangeValue: {
      type: Array,
      default: [],
    },
  });

  const dateStr = computed(() => props.dateStr);
  const dateType = computed(() => props.dateType);
  const dateRangeValue = computed(() => props.dateRangeValue);
  const dataList = ref({});
  onMounted(() => {
    // console.log("---props.dateObj:",props.dateObj)
    searchFn();
  });
  watch(
    () => dateType.value,
    (vl) => {
      console.log('--watch:dateType:', vl);
      if (vl) {
        searchFn();
      }
    },
  );
  watch(
    () => dateStr.value,
    (vl) => {
      console.log('--watch:dateStr:', vl);
      if (vl) {
        searchFn();
      }
    },
  );
  watch(
    () => dateRangeValue.value,
    (vl) => {
      console.log('--watch:dateRangeValue:', vl);
      if (vl) {
        searchFn();
      }
    },
  );
  function change(vl) {
    console.log('--watch::', vl);
  }

  function searchFn() {
    let data = {
      dateStr: dateStr.value,
      dateType: dateType.value,
    };
    if (dateRangeValue.value && dateRangeValue.value.length > 0) {
      data.startDate = dateRangeValue.value[0];
      data.endDate = dateRangeValue.value[1];
    }
    homeStatisticsApi({}).then((res) => {
      if (res.code == 200) {
        let dataJson = res.data;
        growCardListRef.value.forEach(r=>{
          r.value= dataJson[r.field];
        })
        // growCardListRef.value[0].value = dataJson.productTotalNum; //产品总数
        // growCardListRef.value[1].value = dataJson.countStockAll; //sku总数
        // growCardListRef.value[2].value = dataJson.countLowStockAll ? dataJson.countLowStockAll : 0; //低库存
        // growCardListRef.value[3].value = dataJson.orderWaitNum; //待发货订单
      } else {
        createMessage.error(res.message);
      }
    });
  }

  function clickCountToFn(item) {
    go(item.url);
  }
</script>
